<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>安全组</title>
		<link rel="stylesheet" href="../../css/index.css" />
	</head>
	<body>
		<!--安全组列表-->
		<div class="main-page">
			<div class="page-content">
				<div class="search-panel b-r-0 b-t-r">
					<!--搜索区域内容-->
					<div class="search-box pos-re">
						<div class="search-show bg-none">
							<div class="input-box">
								<input class="import-box w-128 pr-30" type="text" placeholder="用户名" />
								<a class="search-down up"><i class="search-down-icon com_icon"></i></a>
							</div>
							<div class="input-box">
								<input class="import-box" type="text" placeholder="安全组名称" />
							</div>
							<a class="search-btn search_icon"></a>
						</div>
						<a class="create-safety create-virtual tc_btn"><i class="add-icon select_icon"></i>创建安全组</a>
					</div>
				</div>
				<!--安全组列表-->
				<div class="table b-b-r">
					<ul class="ul_head">
						<li style="width: 16%; border:0; padding-left:2%;">用户名</li>
						<li style="width: 16%">安全组名称</li>
						<li style="width: 30%">描述</li>
						<li style="width: 34%">操作</li>
					</ul>
					<ul class="safety-list-body ul_body">
						<li class="li_tr">
							<ul>
								<li class="ul_body_td" style="width: 16%; padding-left:2%;">
									<p class="td_content">troila</p>
								</li>
								<li class="ul_body_td" style="width: 16%">
									<p class="td_content">test111</p>
								</li>
								<li class="ul_body_td" style="width: 30%">
									<p class="td_content t-out">这是一段描述信息一段很长很长的藐视信息可能会超出范围到的描述心爱的覅及的覅第秘籍</p>
								</li>
								<li class="ul_body_td" style="width: 34%">
									<div class="select_panel">
										<a class="safety-rule td_btn">管理规则</a>
										<a class="safety-edit td_btn">编辑</a>
										<a class="safety-del td_btn">删除</a>
									</div>
								</li>
							</ul>
						</li>
					</ul>
					<!--底部分页-->
					<div class="table-footer">
						<!--设置每页显示条数-->
						<div class="change-record">
							<label class="foot-label">每页显示</label>
							<div class="record-select">
								<p class="now-record">10<i class="show-record-ul com_icon"></i></p>
								<ul class="record-ul">
									<li class="record-item">10</li>
									<li class="record-item">20</li>
								</ul>
								<span class="record-unit">条</span>
								<div class="checked-count">，选中<span id="checkedCount" class="count-num color0099ff">0</span>条</div>
							</div>
						</div>
					</div>
				</div>
				
				
				<!--管理规则-->
				<div class="safety-manage d-n">
					<div class="safe-manage-panel">
						<div class="panel-header">
							<h2 id="safetyName" class="safety-name">test11</h2>
							<a class="close-pop com_icon"></a>
						</div>
						<div class="panel-handle-box">
							<a class="create-safetyRule create-virtual tc_btn f-12"><i class="add-icon select_icon"></i>创建管理规则</a>
						</div>
						<div class="table b-b-r">
							<ul class="ul_head">
								<li style="width: 14%; border:0; padding-left:2%;">方向</li>
								<li style="width: 16%">输出类型</li>
								<li style="width: 16%">IP协议</li>
								<li style="width: 16%">端口范围</li>
								<li style="width: 14%">远程</li>
								<li style="width: 18%">操作</li>
							</ul>
							<ul class="top_ul_body ul_body">
								<li class="li_tr">
									<ul>
										<li class="ul_body_td" style="width: 14%; padding-left:2%;">
											<p class="td_content">出口</p>
										</li>
										<li class="ul_body_td" style="width: 16%">
											<p class="td_content">IPv6</p>
										</li>
										<li class="ul_body_td" style="width: 16%">
											<p class="td_content t-out">任何</p>
										</li>
										<li class="ul_body_td" style="width: 16%">
											<p class="td_content t-out">任何</p>
										</li>
										<li class="ul_body_td" style="width: 14%">
											<p class="td_content t-out">任何</p>
										</li>
										<li class="ul_body_td" style="width: 18%">
											<div class="select_panel">
												<a class="td_btn">删除</a>
											</div>
										</li>
									</ul>
								</li>
								<li class="li_tr">
									<ul>
										<li class="ul_body_td" style="width: 14%; padding-left:2%;">
											<p class="td_content">出口</p>
										</li>
										<li class="ul_body_td" style="width: 16%">
											<p class="td_content">IPv6</p>
										</li>
										<li class="ul_body_td" style="width: 16%">
											<p class="td_content t-out">任何</p>
										</li>
										<li class="ul_body_td" style="width: 16%">
											<p class="td_content t-out">任何</p>
										</li>
										<li class="ul_body_td" style="width: 14%">
											<p class="td_content t-out">任何</p>
										</li>
										<li class="ul_body_td" style="width: 18%">
											<div class="select_panel">
												<a class="td_btn">删除</a>
											</div>
										</li>
									</ul>
								</li>
							</ul>
						</div>
						<!--底部分页-->
						<div class="table-footer">
							<!--设置每页显示条数-->
							<div class="change-record">
								<label class="foot-label">每页显示</label>
								<div class="record-select">
									<p class="now-record">10<i class="show-record-ul com_icon"></i></p>
									<ul class="record-ul">
										<li class="record-item">10</li>
										<li class="record-item">20</li>
									</ul>
									<span class="record-unit">条</span>
									<div class="checked-count">，选中<span id="checkedCount" class="count-num color0099ff">0</span>条</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../js/libs/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="../../js/view/safetyGroup/safetyGroup.js"></script>

</html>